<template>
  <div class="article-pdf-preview" style="padding: 0 20px;">
    <div
      class="markdown-article-show-content v-note-wrapper markdown-body">
      <div class="v-note-show">
        <div class="v-show-content" v-html="articleDetail.html"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { validateUniqId } from '~/util'
export default {
  name: 'PostIndex',
  validate ({ params }) {
    return validateUniqId(params.id)
  },
  async asyncData ({ $axios, params }) {
    try {
      const articleDetail = (await $axios.get(`/gimishare/api/v1/articles/articleinfo?id=${params.id}`)).data || {}
      return {
        articleDetail
      }
    } catch (error) {
      console.log(error)
    }
  },

  head () {
    return {
      title: this.articleDetail.articleTitle,
      link: [
        {
          rel: 'stylesheet',
          href: '/md/markdown/' + this.articleDetail.theme + '.min.css'
        },
        {
          rel: 'stylesheet',
          href: '/md/highlightjs/styles/' + this.articleDetail.codeStyle + '.min.css'
        },
        {
          rel: 'stylesheet',
          href: '/md/katex/katex.min.css'
        }
      ]
    }
  },

  data () {
    return {
      articleDetail: {}
    }
  },

  methods: {
    renderMarkdown () {
      let page = 1
      const screenHeight = 1123
      const childElements = document.querySelector('.v-show-content').children
      Array.from(childElements).forEach(ele => {
        const offsetTop = ele.offsetTop
        const clientHeight = ele.clientHeight
        const printScreenHeight = offsetTop + clientHeight
        if (printScreenHeight > screenHeight * page) {
          const top = screenHeight * page - (ele.previousElementSibling.offsetTop + ele.previousElementSibling.clientHeight)
          ele.style.marginTop = top + 'px'
          page += 1
        }
      })
      this.hasRenderFinish = true
    }
  }
}
</script>

<style lang="less">
@media print {
  .article-pdf-preview {
    padding: 0 !important;
  }
}
</style>
